<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>修改</button>
  <p></p>
  <script>
    // 将ｐ标签的内容展示token的值
    localStorage.setItem('token','abc')
    document.querySelector('p').innerHTML = localStorage.getItem('token')

    // 点击按钮修改token, 实时让p的内容变化
    // 本地存储的数据不是响应式的 但是vuex中存的数据是响应式
    // token往哪里存? 
    //  vuex存一份  保证数据的响应式
    //  本地存储也存一份 为了保证数据的持久化存储

    // vuex + 本地存储 保证数据 既持久化存储也是响应式
    document.querySelector('button').onclick = () => {
      localStorage.setItem('token', 'xyz')
      document.querySelector('p').innerHTML = localStorage.getItem('token')
    }

    // localStorage 和 cookie有什么区别?
    // 存储的空间 localStorage 大约5M cookie 大约4k
    // 时间localStorage 永久 除非手动删除 cookie是可以设置过期时间的
  </script>
</body>
</html>